<template>
  <div>
      Welcome {{ username }} !
      <p>{{ $route.query.message }}</p>
  </div>
</template>

<script>
export default {
    name: 'WelcomeView',
    data(){
        return {
            username: ''
        }
    },
    // 生命周期钩子
    beforeMount(){
        console.log('准备挂载组件');
        this.username = sessionStorage.getItem('username');
    },
    // 生命周期钩子
    beforeUpdate(){
        console.log('准备更新组件');
    },
    // 组件内守卫
    beforeRouteEnter(to,from,next){
        console.log( `WelcomeView # beforeRouteEnter: ${from.path} to ${to.path}` );
        let last = vm => {
            console.log( 'next: ' , vm );
        }
        next( last );
    },
    // 组件内守卫
    beforeRouteUpdate(to,from){
        console.log(`WelcomeView # beforeRouteUpdate: 从${from.path}到${to.path}`);
        console.log( to );
    },
    // 组件内守卫
    beforeRouteLeave(to,from){
      console.log(`WelcomeView # beforeRouteLeave: 即将离开${from.path}去往${to.path}`);
    }
}
</script>

<style>

</style>